@charset "utf-8";

@function px($px){
    @return  ($px/2);
}
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}

#web{
    width: 100%;
    height: 100%;
    position: relative;
    
    header{
        width: 100%;
        height: r(110);
        position: absolute;
        top: 0;
        input{
            width: r(120);
             height: r(60);
             border: 1px solid #FF9344;
             border-radius: 25px;
             background: #FFFFFF;
             font-size: r(30);
             float: left;
             margin-top: r(48);
             margin-left: r(24);
        }//input
        img{
            width: r(62);
            height: r(60);
            float: right;
            margin-top: r(42);
            margin-right: r(30);
        }
        p{
            width: r(80);
            height: r(35);
            text-align: center;
            line-height: r(35);
            font-size: r(40);
            margin: 0 auto;
            padding-top: r(60);
        }//p
    }//header
    section{
         width: 100%;
         position: absolute;
         top: r(110);
         bottom: 68px;
         overflow: scroll;
         -webkit-overflow-scrolling: touch;
        .secBox1{
            width: 100%;
            height: r(210);
            img{
                width: r(170);
                height: r(170);
                margin-top: r(20);
                margin-left: r(30);
                float: left;
            }
            h3{
                width: r(160);
                height: r(40);
                float: left;
                font-size: r(40);
                margin-top: r(30);
                margin-left: r(30);
            }
            span{
                float: left;
                color: #d2d2d2;
                height: r(40);
                margin-left: r(30);
            }
//          .secBox1-1{
//              width: r(50);
//              height: r(50);
//              float: right;
//              margin-top: r(-80);
//              h3{
//                  font-size: r(70);
//              }
//          }
            
        }//secBox1
        .secBox2{
                width: r(702);
                height: r(170);
                margin: 0 auto;
                ul{
                    li{
                        float: left;
                        margin-right: r(64);
                        margin-top: r(15);
                        img{
                            width: r(191);
                            height: r(150);
                        }
                    }
                    .secBox2-1{
                        margin-right: 0;
                    }
                }
        }//secBox2
        .secBox3{
            width: 100%;
            height: r(74);
            margin-top: r(35);
            .secBox3-1{
                width: 100%;
                height: r(74);
                img{
                   width: r(74);
                   height: 100%;
                   margin-left: r(30);
                   float: left;
                }
                span{
                   float: left;
                   font-size: r(36);
                   line-height: r(74);
                   margin-left: r(25);
                }
            }
            .secBox3-2{
                    width:r(150);
                    height: r(40);
                    float: right;
                    margin-top: r(-65);
                    
                    span{
                        font-size: r(34);
                        line-height: r(30);
                        padding-top: r(5);
                    }
                    i{
                      color: #FF9344;  
                    }
                }
            
        }//secBox3
        .secBox4{
            margin-top: r(35);
            .secBox4-1{
                width: r(150);
                height: r(75);
                border-radius: 25px;
                background: #FF9344;
                color: white;
                margin-left: r(110);
            }
            .secBox4-2{
                width: r(150);
                height: r(75);
                border-radius: 25px;
                background: #FF9344;
                color: white;
                margin-right: r(110);
            }
        }
    }//section
    footer{
         width: 100%;
         height: r(136);
         position: absolute;
         bottom: 0;
         background: white;
        a{
            color: black;
        }//a
        ul li{
            width: 25%;
            height: r(136);
            float: left;
            text-align: center;
                       
            .iconfont{
                color: transparent;
                font-size: r(60);
                -webkit-text-stroke: 1px #FF9344;
            }
            &.active .iconfont{
                  color: #FF9344;
            }
            p{
              font-size: r(32);
              color: black;
            }
            &:hover .iconfont{
              color: yellow;
            }
        }
    }//footer
}//web
